<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <el-form-item label="订单号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入订单号"
                v-model="searchForm.order_no"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="收货人姓名" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人姓名"
                v-model="searchForm.recipient"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="收货人电话" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人电话"
                v-model="searchForm.phone_number"
                type="number"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item
              v-if="searchDisplay"
              label="商品名称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品名称"
                v-model="searchForm.goods_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="订单状态" style="margin: 5px 0">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择订单状态"
              >
                <el-option
                  v-for="item in [
                    { name: '待付款', id: 1 },
                    { name: '待发货', id: 2 },
                    { name: '待收货', id: 3 },
                    { name: '退货、售后', id: 4 },
                    { name: '已收货', id: 5 },
                    { name: '已取消', id: 9 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="用户ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户ID"
                v-model="searchForm.user_id"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="商品ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品ID"
                v-model="searchForm.goods_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="供货商ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入供货商ID"
                v-model="searchForm.supplier_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="店铺/商户ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入店铺/商户ID"
                v-model="searchForm.mer_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="下单起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="create_time"
                type="datetimerange"
                @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="支付起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="pay_time"
                type="datetimerange"
                @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
              >查询
              </el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
              >重置
              </el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
              >展开
              </el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
              >收起
              </el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="getListWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                        tableTheadOptions[fruit].label
                      }}
                    </el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            highlight-current-row
            :data="OrderList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column align="center" prop="order_no" label="订单号|类型" min-width="130">
              <template slot-scope="scope">
                <div>{{ scope.row.order_no }}</div>
                <el-tag v-if="scope.row.type == 1" type="warning">【普通订单】</el-tag>
                <el-tag v-else type="success">【活动订单】</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="order_no" label="商品信息" min-width="200">
              <template slot-scope="scope">
                <div v-for="(goodsItem, goodsIndex) in scope.row.order_detail" :key="goodsIndex">
                  <div style="display: flex;align-items: center;text-align: left;">
                    <el-image
                      v-if="goodsItem.goods_main_image"
                      :src="goodsItem.goods_main_image"
                      :preview-src-list="[goodsItem.goods_main_image]"
                      style="height: 30px;width: 30px;"
                    />
                    &nbsp;&nbsp;
                    <span>{{ goodsItem.goods_name }}【{{ goodsItem.sku_name }} × {{ goodsItem.buy_number }}】</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="fruit == 'user_avatar' || fruit == 'goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto"
                >
                  <el-image
                    v-if="scope.row[fruit]"
                    :src="scope.row[fruit]"
                    :preview-src-list="[scope.row[fruit]]"
                  />
                </div>
                <span v-else>
                  {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                </span>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="pay_service" label="支付方式">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.pay_service == 1" type="warning">余额支付</el-tag>
                <el-tag v-else-if="scope.row.pay_service == 2" type="default">支付宝支付</el-tag>
                <el-tag v-else-if="scope.row.pay_service == 3" type="info">微信支付</el-tag>
                <el-tag v-else type="danger">未支付</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="订单状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1" type="warning">待支付</el-tag>
                <el-tag v-if="scope.row.status == 2" type="info">待发货</el-tag>
                <el-tag v-if="scope.row.status == 3" type="info">待收货</el-tag>
                <el-tag v-if="scope.row.status == 4">订单售后</el-tag>
                <el-tag v-if="scope.row.status == 5" type="success">已收货</el-tag>
                <el-tag v-if="scope.row.status == 6" type="success">交易完成</el-tag>
                <el-tag v-if="scope.row.status == 7" type="warning">售后完成</el-tag>
                <el-tag v-if="scope.row.status == 9" type="danger">已取消</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="120"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">

                <div style="text-align: right;">
<!--                  <el-button
                    v-if="scope.row.status == 2"
                    style="margin: 5px"
                    type="danger"
                    size="mini"
                    @click="refundOrder(scope.row)"
                  >
                    退款
                  </el-button>-->

                  <el-popconfirm
                    title="确定取消该订单嘛？"
                    @confirm="cancellationOrder(scope.row)"
                  >
                    <el-button
                      v-if="scope.row.status == 1"
                      style="margin: 5px"
                      type="danger"
                      size="mini"
                      slot="reference"
                    >
                      取消
                    </el-button>
                  </el-popconfirm>

                  <el-button
                    style="margin: 5px"
                    type="primary"
                    size="mini"
                    @click="drawerHandleOpen(scope.row)"
                  >
                    详情
                  </el-button>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.pageSize"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <!-- 查看备注弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="remarkDialog"
      width="700px"
    >
      <div style="position: relative" v-loading="remarkLoading">
        <div style="text-align: left; margin-bottom: 10px">
          <el-button
            @click="setRemarkDialog = true"
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="mini"
          >添加备注
          </el-button
          >
        </div>
        <el-descriptions
          v-for="(item, index) in remarkList"
          :key="index"
          :column="1"
          border
          style="margin-top: 10px"
        >
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 添加时间</template>
            {{ item.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"> 备注</template>
            {{ item.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <el-empty
          v-if="remarkList.length == 0"
          description="当前订单没有添加备注"
        ></el-empty>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarkDialog = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加备注弹框 -->
    <el-dialog
      title="添加备注"
      :close-on-click-modal="false"
      :visible.sync="setRemarkDialog"
      width="700px"
      @close="
        () => {
          remarkForm.remark = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="setRemarkLoading">
        <el-form label-width="80px">
          <el-col :span="22">
            <el-form-item label="备注" :rules="[{ required: true }]">
              <el-input
                type="textarea"
                placeholder="请输入要添加的备注"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="remarkForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="setRemarkLoading"
          @click="setRemarkSubmit"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改收货地址弹框 -->
    <el-dialog
      title="修改收货地址"
      :close-on-click-modal="false"
      :visible.sync="addressDialog"
      width="800px"
      @close="
        () => {
          remarkForm.remark = '';
        }
      "
    >
      <el-row
        :gutter="20"
        style="position: relative"
        v-loading="addressLoading"
      >
        <el-form
          label-width="120px"
          :rules="addressRules"
          ref="addressForm"
          :model="addressForm"
        >
          <el-col :span="11">
            <el-form-item label="收货人姓名" prop="recipient">
              <el-input
                type="text"
                placeholder="请输入收货人姓名"
                maxlength="10"
                show-word-limit
                v-model.trim="addressForm.recipient"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人手机号" prop="phone_number">
              <el-input
                type="text"
                placeholder="请输入收货人手机号"
                maxlength="11"
                show-word-limit
                v-model.trim="addressForm.phone_number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人省份" prop="province_name">
              <el-select
                @change="provinceWay"
                v-model="addressForm.province_name"
                placeholder="请输入收货人省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人城市" prop="city_name">
              <el-select
                @change="cityWay"
                v-model="addressForm.city_name"
                placeholder="请输入收货人城市"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收货人区/县" prop="district_name">
              <el-select
                v-model="addressForm.district_name"
                placeholder="请输入收货人城市"
              >
                <el-option
                  v-for="item in districtList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="收货人详细地址" prop="address_details">
              <el-input
                type="text"
                placeholder="请输入收货人详细地址"
                maxlength="50"
                show-word-limit
                v-model.trim="addressForm.address_details"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="addressLoading"
          @click="addressSubmit"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 取消订单备注弹框 -->
    <el-dialog
      title="取消订单原因"
      :close-on-click-modal="false"
      :visible.sync="cancelDialog"
      width="700px"
      @close="
        () => {
          cancelform.reason = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="cancelLoading">
        <el-form label-width="80px">
          <el-col :span="22">
            <el-form-item label="取消原因">
              <el-input
                type="textarea"
                placeholder="请输入取消原因"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="cancelform.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="cancelLoading"
          @click="serCancelSubmit"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 退款弹框弹框 -->
    <el-dialog
      title="退款信息"
      :close-on-click-modal="false"
      :visible.sync="refundDialog"
      width="700px"
      @close="
        () => {
          refundform.price_total = '';
          refundform.points_total = '';
          refundform.coupon_total = '';
          refundform.detail_id = '';
          refundform.reason = '';
        }
      "
    >
      <el-row style="position: relative" v-loading="refundLoading">
        <el-form
          label-width="80px"
          :model="refundform"
          :rules="refundRules"
          ref="refundform"
        >
          <el-col :span="11">
            <el-form-item label="现金" prop="price_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入现金"
                show-word-limit
                v-model.trim="refundform.price_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="积分" prop="points_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入积分"
                show-word-limit
                v-model.trim="refundform.points_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="提货券" prop="coupon_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入提货券"
                show-word-limit
                v-model.trim="refundform.coupon_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="取消原因">
              <el-input
                type="textarea"
                placeholder="请输入取消原因"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="refundform.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="refundLoading" @click="refundSubmit"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 发货记录 -->
    <el-dialog
      title="发货记录"
      :close-on-click-modal="false"
      :visible.sync="orderDetailDeliveryDialog"
      width="1000px"
    >
      <el-row style="position: relative" v-loading="orderDetailDeliveryLoading">
        <el-table
          highlight-current-row
          :data="orderDetailDeliveryList"
          :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="created_at"
            label="发货时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="express_name"
            label="快递名称"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="express_num"
            label="快递单号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="recipient"
            label="收货人"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone_number"
            label="电话"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="buy_number"
            label="收货地区"
          >
            <template slot-scope="scope">
              {{ scope.row.province_name }}&nbsp;&nbsp;
              {{ scope.row.city_name }}&nbsp;&nbsp;
              {{ scope.row.district_name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address_details"
            label="详细地址"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="buy_number"
            label="收货状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="warning">待收货</el-tag>
              <el-tag v-else-if="scope.row.status == 2" type="default">已收货</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-empty
          v-if="orderDetailDeliveryList.length == 0"
          description="暂无数据"
        ></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="orderDetailDeliveryLoading"
          @click="orderDetailDeliveryDialog = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 订单详情 -->
    <el-drawer
      title="订单详情"
      size="1000px"
      :visible.sync="drawer"
      direction="rtl"
      @close="drawerHandleClose"
    >
      <div style="padding: 0 30px">
        <el-tabs
          v-loading="subLoading"
          v-model="activeNames"
          @tab-click="infotabshandleClick"
        >
          <el-tab-pane label="订单详情" name="订单详情">
            <el-row :gutter="20">
              <el-col :span="24">
                <h3>用户信息</h3>
              </el-col>
              <el-col :span="24">
                <el-row style="position: relative">
                  <el-descriptions
                    :column="5"
                    border
                  >
                    <el-descriptions-item :span="1">
                      <template slot="label"> 用户ID</template>
                      {{ orderRow.user_id }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                      <template slot="label"> 用户昵称</template>
                      {{ orderRow.user_nickname }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                      <template slot="label"> 用户电话</template>
                      {{ orderRow.user_mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 用户头像</template>
                      <img :src="orderRow.user_avatar" height="30" width="30"/>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-row>
              </el-col>

              <el-col :span="24">
                <h3>订单信息</h3>
              </el-col>
              <el-col :span="24">
                <el-row style="position: relative">
                  <el-descriptions
                    :column="5"
                    border
                  >
                    <el-descriptions-item :span="2">
                      <template slot="label"> 下单时间</template>
                      {{ orderRow.created_at }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 商品总数</template>
                      {{ orderRow.order_detail ? orderRow.order_detail.length : 0 }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 支付时间</template>
                      {{ orderRow.pay_time || '未支付' }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 商品总价(含手续费)</template>
                      {{ orderRow.price_total }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 商品总积分(含手续费)</template>
                      {{ orderRow.points_total }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 商品总提货券(含手续费)</template>
                      {{ orderRow.coupon_total }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 总运费</template>
                      {{ orderRow.freight_total }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 总折扣</template>
                      {{ orderRow.discount_total }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                      <template slot="label"> 实际支付</template>
                      {{ orderRow.pay_total }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="商品列表" name="商品列表">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-table
                  highlight-current-row
                  :data="orderRowDetail"
                  :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
                  style="width: 100%"
                >
                  <el-table-column
                    align="center"
                    prop="goods_name"
                    label="商品信息"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="product_sku"
                    label="规格"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="price_unit"
                    label="单价"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="buy_number"
                    label="购买数量"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="price_total"
                    label="总价"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="points_total"
                    label="总积分"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="coupon_total"
                    label="总提货券"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="freight_total"
                    label="总运费"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="discount_total"
                    label="总折扣"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    fixed="right"
                    width="80"
                    prop="address"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <div style="text-align: right;">
                        <el-button
                          style="margin: 5px"
                          type="primary"
                          size="mini"
                          @click="orderDeliveryList(scope.row)"
                        >
                          发货记录
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="订单备注" name="订单备注">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-table
                  highlight-current-row
                  :data="orderRowRemark"
                  :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
                  style="width: 100%"
                >
                  <el-table-column
                    align="center"
                    prop="created_at"
                    label="时间"
                    width="140"
                  >
                  </el-table-column>
                  <el-table-column
                    align="left"
                    prop="remark"
                    label="备注"
                  >
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getOrderList,
  getOrderListByOrder,
  getRemarkList,
  setRemark,
  setAddress,
  serCancel,
  setRefundDirect,
  getDeliveryList,
} from "@/api/order/index";
import {getRegionList} from "@/api/user/index";

const tableTheadOption = {
  id: {
    label: "订单ID",
    field: "id",
  },
  order_no: {
    label: "子订单",
    field: "order_no",
  },
  points_total: {
    label: "支付积分",
    field: "points_total",
  },
  coupon_total: {
    label: "支付提货券",
    field: "coupon_total",
  },
  freight_total: {
    label: "支付运费",
    field: "freight_total",
  },
  discount_total: {
    label: "总折扣",
    field: "discount_total",
  },
  pay_total: {
    label: "支付金额",
    field: "pay_total",
  },
  created_at: {
    label: "下单时间",
    field: "created_at",
  },
  pay_service: {
    label: "支付平台",
    field: "pay_service",
  },
  pay_time: {
    label: "支付时间",
    field: "pay_time",
  },
  user_nickname: {
    label: "用户昵称",
    field: "user_nickname",
  },
  user_avatar: {
    label: "用户头像",
    field: "user_avatar",
  },
};
const allTableThead = [
  "id",
  "order_no",
  "points_total",
  "coupon_total",
  "freight_total",
  "discount_total",
  "pay_total",
  "created_at",
  "pay_service",
  "pay_time",
  "user_nickname",
  "user_avatar",
];
const defaultTableThead = [
  "created_at",
  "pay_total",
  "points_total",
  "freight_total",
  "discount_total",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchForm: {
        order_no: "", //根据订单号
        user_id: "", // 根据用户ID
        status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      },
      // 当前搜索是否展开
      searchDisplay: false,
      create_time: [],
      pay_time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      OrderList: [],
      total: 0,
      remarkDialog: false, // 订单备注弹框控制器
      remarkLoading: false, // 订单备注弹框加载控制器
      remarkList: [], // 订单备注列表
      remarkForm: {
        detail_id: "",
        remark: "",
      },
      setRemarkDialog: false, // 订单备注弹框控制器
      setRemarkLoading: false, // 订单备注弹框加载控制器
      addressForm: {
        detail_id: "", //订单明细表ID
        recipient: "", //收货人姓名
        phone_number: "", //收货人电话
        province_name: "", //省
        city_name: "", //市
        district_name: "", //区
        address_details: "", //	详细地址
      },
      addressRules: {
        recipient: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g;
              if (value === "") {
                callback(new Error("收货人名称为必填项"));
              } else {
                if (req.test(value)) {
                  callback(new Error("名称只能为中文和英文"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        phone_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (!req.test(value)) {
                callback(new Error("收货人手机号格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        province_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人省份为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        city_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人城市为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        district_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人区/县为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        address_details: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人详细地址为必填项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },

      provinceList: [],
      cityList: [],
      districtList: [],
      addressFules: {},
      addressDialog: false,
      addressLoading: false,

      cancelform: {
        detail_id: "",
        reason: "",
      },
      cancelDialog: false,
      cancelLoading: false,

      refundform: {
        detail_id: "",
        price_total: "",
        points_total: "",
        coupon_total: "",
        reason: "",
      },
      refundRules: {
        price_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        points_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        coupon_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
      },
      refundDialog: false,
      refundLoading: false,

      drawer: false,// 详情是否显示
      subLoading: false,// 详情页面加载
      activeNames: "订单详情",// 订单详情tab切换
      orderRow: {}, //总订单详情
      orderRowDetail: [], //总订单商品明细
      orderRowRemark: [], //总订单备注明细
      orderDetailDeliveryDialog: false, //商品发货记录-是否显示
      orderDetailDeliveryLoading: false, //商品发货记录-加载状态
      orderDetailDeliveryList: [], //商品发货记录
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getOrderListByOrder(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.OrderList = res.data.list;
          this.total = res.data.total;
        }).catch((err) => {
        this.loading = false;
        this.$messages.error(err.msg);
      });
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    resetting() {
      this.searchForm = {
        order_no: "", //根据订单号
        user_id: "", // 根据用户ID
        status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      };
      this.create_time = [];
      this.pay_time = [];
      this.getListWay();
    },

    // 打开修改备注的弹框
    editNotesWay(row) {
      this.remarkDialog = true;
      this.remarkLoading = true;
      this.remarkForm.detail_id = row.detail_id;
      getRemarkList({detail_id: row.detail_id}).then((res) => {
        this.remarkLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.remarkDialog = false;
          return this.$messages.error(res.msg);
        }
        this.remarkList = res.data;
      });
    },
    setRemarkSubmit() {
      if (!this.remarkForm.remark) {
        return this.$messages.error("请输入需要添加的备注");
      }
      this.setRemarkLoading = true;
      setRemark(this.remarkForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.setRemarkLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.remarkForm.remark = "";
        this.editNotesWay(this.remarkForm);
        this.setRemarkDialog = false;
      });
    },
    drawerHandle(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.addressDialog = true;
      this.addressLoading = true;
      getRegionList()
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.addressLoading = false;
            return this.$messages.error(res.msg);
          }
          this.provinceList = res.data;
          var arr = this.provinceList.filter((item) => {
            if (item.name == obj.addr_province_name) {
              return item.children;
            }
          });
          this.cityList = arr[0].children;
          var arr1 = this.cityList.filter((item) => {
            if (item.name == obj.addr_city_name) {
              return item.children;
            }
          });
          this.districtList = arr1[0].children;
          this.addressForm.detail_id = obj.detail_id;
          this.addressForm.recipient = obj.addr_recipient;
          this.addressForm.phone_number = obj.addr_phone_number;
          this.addressForm.province_name = obj.addr_province_name;
          this.addressForm.city_name = obj.addr_city_name;
          this.addressForm.district_name = obj.addr_district_name;
          this.addressForm.address_details = obj.addr_address_details;
          this.addressLoading = false;
        })
        .catch((res) => {
          this.addressLoading = false;
          return this.$messages.error(res.msg);
        });
    },
    provinceWay(val) {
      this.addressForm.city_name = "";
      this.addressForm.district_name = "";
      this.provinceList.forEach((item) => {
        if (item.name == val) {
          this.cityList = item.children;
        }
      });
    },
    cityWay(val) {
      this.addressForm.district_name = "";
      this.cityList.forEach((item) => {
        if (item.name == val) {
          this.districtList = item.children;
        }
      });
    },

    // 提交修改收货地址
    addressSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          this.addressLoading = true;
          setAddress(this.addressForm)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.addressLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.addressLoading = false;
              this.addressDialog = false;
              this.getListWay();
              this.addressForm = {
                detail_id: "", //订单明细表ID
                recipient: "", //收货人姓名
                phone_number: "", //收货人电话
                province_name: "", //省
                city_name: "", //市
                district_name: "", //区
                address_details: "", //	详细地址
              };
            })
            .catch((res) => {
              this.addressLoading = false;
              return this.$messages.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    cancellationOrder(row) {
      this.cancelform.detail_id = row.detail_id;
      this.cancelDialog = true;
    },
    serCancelSubmit() {
      this.cancelLoading = true;
      serCancel(this.cancelform).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.cancelLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.cancelDialog = false;
        this.cancelform = {
          detail_id: "",
          reason: "",
        };
        this.getListWay();
      });
    },

    // 退款
    refundOrder(row) {
      console.log(row);
      this.refundform.detail_id = row.detail_id;
      this.refundform.price_total = row.pay_total;
      this.refundform.points_total = row.points_total;
      this.refundform.coupon_total = row.coupon_total;
      this.refundDialog = true;
    },
    refundSubmit() {
      this.$refs.refundform.validate((valid) => {
        if (valid) {
          this.refundLoading = true;
          setRefundDirect(this.refundform).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.refundLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.refundDialog = false;
            this.refundform = {
              detail_id: "",
              price_total: "",
              points_total: "",
              coupon_total: "",
              reason: "",
            };
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },

    //打开详情框
    drawerHandleOpen(row) {
      this.drawer = true;
      this.orderRow = row;
    },
    //关闭详情框
    drawerHandleClose() {
      this.drawer = false;
      this.orderRowDetail = [];
      this.orderRowRemark = [];
      this.orderDetailDeliveryList = [];
      this.orderRow = {};
      this.activeNames = '订单详情';
    },
    //详情中切换类型
    infotabshandleClick() {
      if (this.activeNames == "商品列表") {
        this.orderDetailList(this.orderRow);
      } else if (this.activeNames == "订单备注") {
        this.orderRemarkList(this.orderRow);
      }
    },
    //获取商品明细
    orderDetailList(orderRow) {
      getOrderList({order_id: orderRow.id, page: 1, pageSize: 100})
        .then((res) => {
          this.orderRowDetail = res.data.list;
        }).catch((err) => {
        this.$messages.error(err.msg);
      });
    },
    //获取备注明细
    orderRemarkList(orderRow) {
      getRemarkList({order_id: orderRow.id}).then((res) => {
        this.orderRowRemark = res.data;
      }).catch(err => {
        this.$messages.error(err.msg);
      });
    },
    //查看发货记录
    orderDeliveryList(orderDetail) {
      this.orderDetailDeliveryLoading = true;
      this.orderDetailDeliveryDialog = true;
      getDeliveryList({detail_id: orderDetail.detail_id}).then((res) => {
        this.orderDetailDeliveryLoading = false;
        this.orderDetailDeliveryList = res.data;
      }).catch(err => {
        this.$messages.error(err.msg);
      });
    }
  },
};
</script>

<style lang="scss">
.my-label {
  width: 20%;
  text-align: center !important;
}
</style>
